<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>设备信息</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="${ctx!}/assets/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx!}/assets/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="${ctx!}/assets/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

    <link href="${ctx!}/assets/css/animate.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="${ctx!}/assets/css/admin-main.css" rel="stylesheet">

    <link rel="stylesheet" href="${ctx!}/assets/bower_components/amazeui/dist/css/amazeui.min.css"/>
    <link rel="stylesheet" href="${ctx!}/assets/css/colddemo.css">
    <style>

        .redpoint {
            width: 18px;
            height: 18px;
        }

        .equipmentlabel {
            position: absolute;
            /*top: 95.3625px;
            left: 56.08px;*/
            color: white;
            background: #0a6aa1;
            opacity: 1;
            width: 30px;
            height: 30px;
            font-size: 25px;
            white-space: nowrap;
            text-align: center;
        }

        .clicklabel {
            position: absolute;
            /*top: 95.3625px;
            left: 56.08px;*/
            background: #173059;
            color: white;
            border: solid 1px #2056b1;
            opacity: 0.8;
            width: 78px;
            height: 38px;
            font-size: 8px;
            white-space: nowrap;
            text-align: center;
            line-height: 38px;
            overflow: hidden; /*超出的部分隐藏起来。*/
            text-overflow: ellipsis; /*超出文本以省略号显示 */
        }

        .clicklabel:hover {
            background: #264d8e;
        }

        div {

        }

        .layui-layer-title {
            background-color: #1a2f42 !important;
            color: white !important;
        }
    </style>

</head>

<body style="background-color:transparent;">
<div style=" border:2px #156a97; padding: 15px; box-sizing: border-box; height: 100%; width: 100%; ">
    <#--  ${ctx}/assets/img/show-test.gif      -->
    <img style="opacity: 0.8;height: 100%; width: 100%" src="${ctx}${currProject.image}" alt="" id="confPic">
    <div id="bell" style="position:absolute; font-size: 25px; top:40px; left: 40px; color: grey"
         class="fa fa-bell"></div>
    <div id="textbox"
         style="font-size: 10px; color:white;position:absolute; display: inline-block; width:300px; height:100px; right: 10px;bottom: 50px">
        <table style="width:100%; height: 100%">
            <tr style="font-size: 12px">
                <td style="width: 28%;">&nbsp;&nbsp;&nbsp;&nbsp;室外温度</td>
                <td>: 27.0℃</td>
            </tr>
            <tr>
                <td style="width: 28%;">&nbsp;&nbsp;&nbsp;&nbsp;室外湿度</td>
                <#--                    <td>温度: ${dryOutdoor}</td>-->
                <#--                    <td>湿度: ${moistOutdoor}</td>-->
                <#--                    <td>照度: ${beam}</td>-->

                <td>: 36.0%</td>

            </tr>
            <tr>
                <td style="width: 28%;">太阳辐射强度</td>
                <td>: ${beam}</td>
            </tr>
        </table>
    </div>
    <div style="height: 70px;"></div>
</div>


<!-- 全局js -->
<script src="${ctx!}/assets/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx!}/assets/js/bootstrap.min.js?v=3.3.6"></script>

<!-- Bootstrap table -->
<script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="${ctx!}/assets/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

<!-- Peity -->
<script src="${ctx!}/assets/js/plugins/peity/jquery.peity.min.js"></script>

<script src="${ctx!}/assets/js/plugins/layer/layer.min.js"></script>

<#--图片-->
<#--<script src="${ctx!}/assets/bower_components/jquery/dist/jquery.min.js"></script>-->
<script src="${ctx!}/assets/bower_components/amazeui/dist/js/amazeui.min.js"></script>
<script src="${ctx!}/assets/bower_components/MessengerJS/messenger.js"></script>
<script src="${ctx!}/assets/bower_components/layer/layer.js"></script>

<!-- 自定义js -->
<script src="${ctx!}/assets/js/content.js?v=1.0.0"></script>
<#--<script src="${ctx!}/assets/js/adminPicConfig.js"></script>-->

<script type="application/javascript">
    $(document).ready(function () {
        <#if (equipment)??>
        layer.open({
            type: 2,
            title: "${equipment.name}",
            shadeClose: true,
            shade: false,
            area: ['600px', '550px'],
            content: "${ctx!}/web/project/equipment/" + "${equipment.id}",
        });
        </#if>
    });

    var deviceGroup = new Object();

    function drawPics() {
        <#if (devices?size > 0)>
        <#list devices as device>
        <#if device.display==1>
        </#if>
        </#list>
        </#if>
        <#if (equipments?size > 0)>
        <#list equipments as equipment>
        <#if (equipment.display?string('yes', 'no'))=='yes'>
        deviceGroup["equipment${equipment.id}"] = new Object();
        deviceGroup["equipment${equipment.id}"]["hidden"] = true;
        deviceGroup["equipment${equipment.id}"]["id"] = ${equipment.id};
        deviceGroup["equipment${equipment.id}"]["name"] = "${equipment.name}";
        deviceGroup["equipment${equipment.id}"]["x1"] = "${equipment.x1}";
        deviceGroup["equipment${equipment.id}"]["y1"] = "${equipment.y1}";
        deviceGroup["equipment${equipment.id}"]["list"] = [];
        <#if (equipment.devices?size > 0)>
        <#list equipment.devices as device>
        <#if device.display==1>
        deviceGroup["equipment${equipment.id}"]["list"].push("device${device.id}");
        //draw
        var tail;
        <#if device.template.isBin?string('yes', 'no')=='yes'>
        if (parseInt(${device.data}) == 0)
            tail = "${device.template.bin0}";
        else
            tail = "${device.template.bin1}";
        <#else >
        tail = "${device.template.tag}";
        </#if>
        drawLabel(${device.coordinateX} * confPicPos.width,
        ${device.coordinateY}*
        confPicPos.height, "${device.id}", "${device.template.name}", "${dataList[device_index]}", tail
    )
        ;
        </#if>
        </#list>
        </#if>
        drawEquipment(${equipment.x1} * confPicPos.width,
        ${equipment.y1}*
        confPicPos.height,
        ${equipment.x2}*
        confPicPos.width,
        ${equipment.y2}*
        confPicPos.height,
            ${equipment.status},
            "${equipment.id}"
    )
        ;
        </#if>
        </#list>
        </#if>
    }


    function refreshSpan(id, data) {
        $("#device" + id + " #data" + id + "").text(data);
    }

    function refreshData() {
        $.ajax({
            type: "GET",
            url: "${ctx!}/web/project/device/data",
            dataType: "json",
            success: function (rtn) {
                $.each(rtn.data, function (index, deviceData) {
                    refreshSpan(deviceData.device.id, deviceData.data);
                });
            }
        });
    }

    setInterval('refreshData()', 30000);

    function refreshBell() {
        $.ajax({
            type: "GET",
            url: "${ctx!}/web/project/device/alarmcount",
            dataType: "json",
            success: function (rtn) {
                alarmColor(parseInt(rtn.data));
            }
        });
    }

    setInterval('refreshBell()', 30000);


    var confPicPos = $("#confPic").offset();
    confPicPos["width"] = $("#confPic").width();
    confPicPos["height"] = $("#confPic").height();
    var deltax = 80 / 2, deltay = 40 / 2;

    /**
     * 绘制每一个设备默认显示的采集点的标签，默认是隐藏的，只有被点击才会显示
     * @param x
     * @param y
     * @param id
     * @param name
     * @param data
     * @param template
     */
    function drawLabel(x, y, id, name, data, template) {
        var top_value = document.getElementById("confPic").offsetTop + document.body.scrollTop;
        var left_value = document.getElementById("confPic").offsetLeft; //left
        var _labelhtml = '<div id="device' + id + '" hidden="hidden" style="top:' + (top_value + y - deltay) + 'px;left: ' + (left_value + x - deltax) + 'px" class="clicklabel"><span>' + name + ': </span><span id=\'data' + id + '\'>' + data + '</span><span>' + template + '</span></div>';
        $(_labelhtml).insertAfter('#confPic')
    }

    /**
     * 绘制每一个设备被点击的标签，标签是隐藏的
     * @param x1
     * @param y1
     * @param x2
     * @param y2
     * @param id
     */
    function drawEquipment(x1, y1, x2, y2, status, id) {
        var top_value = document.getElementById("confPic").offsetTop + document.body.scrollTop;
        var left_value = document.getElementById("confPic").offsetLeft; //left
        // var _labelhtml = '<div id="equipment' + id + '" style="top:' + (top_value + y1) + 'px;left: ' + (left_value + x1) + 'px" class="equipmentlabel"></div>';
        if (status == 0) {
            color = "green"
        } else if (status == 1) {
            color = "yellow"
        } else {
            color = "red"
        }
        var _labelhtml = '<div id="equipment' + id + '" class="equipmentlabel" style="top:' + (top_value + y1) + 'px;left: ' + (left_value + x1) + 'px;border-radius: 50%;cursor: pointer;border:1px solid white;opacity: 0.7;background-color: ' + color + '"></div>';

        $(_labelhtml).insertAfter('#confPic')

        eqp = document.getElementById('equipment' + id);
        // eqp.style.height = y2-y1+"px";
        // eqp.style.width = x2-x1+"px";
        eqp.style.height = "10px";
        eqp.style.width = "10px";
    }

    function alarmColor(count) {
        if (count > 0)
            $('#bell').css('color', 'red');
        else
            $('#bell').css('color', 'grey');
    }

    $(document).ready(function () {
        drawPics();

        function loadData() {
            upload = layer.msg('加载中。。。', {
                icon: 16
                , shade: 0.2,
                time: false
            });
            refreshData();
            refreshBell();
            layer.close(upload);
        }

        loadData();

        var timeoutID = null;
        /**
         * 点击设备的标签，标签是隐藏的
         */
        $(".equipmentlabel").on('click', function (e) {
            clearTimeout(timeoutID);
            $this = $(this);
            timeoutID = window.setTimeout(function () {
                id = $this.attr("id");
                if (deviceGroup[id]["hidden"]) { //从隐藏状态变为显示状态
                    deviceGroup[id]["list"].forEach(function (deviceId) {
                        $('#' + deviceId).removeAttr("hidden");
                    });
                    deviceGroup[id]["hidden"] = false;
                } else {
                    deviceGroup[id]["list"].forEach(function (deviceId) {
                        $('#' + deviceId).attr("hidden", "hidden");
                    });
                    deviceGroup[id]["hidden"] = true;
                }
            }, 300);
        });

        /**
         * 双击设备的标签，标签是隐藏的
         */
        $(".equipmentlabel").on('dblclick', function (e) {
            clearTimeout(timeoutID);
            $this = $(this);
            id = $this.attr("id");
            layer.open({
                type: 2,
                title: deviceGroup[id]["name"],
                shadeClose: true,
                shade: false,
                area: ['600px', '550px'],
                content: "${ctx!}/web/project/equipment/" + deviceGroup[id]["id"],
            });
        });
    });


</script>


</body>

</html>
